<template>
  <div>
    <a-tabs default-active-key="blog" @change="callback">
      <a-tab-pane key="resource" tab="资源首页">
        <a-menu @select="selectHandler" :default-selected-keys="defaultSelectKeys" mode="horizontal">
          <a-menu-item v-for="item in resourceTypeList || []" :key="item.resourceTypeId">{{item.resourceType}}</a-menu-item>
          <a-button class="opera-btn" type="primary" size="small" v-if="$store.state.user.loginUser.type !== 3" @click="typeHandler('add')">新增</a-button>
          <a-button class="opera-btn" type="primary" size="small" v-if="$store.state.user.loginUser.type !== 3" @click="typeHandler('update')">修改</a-button>
          <a-button class="opera-btn" type="danger" size="small" v-if="$store.state.user.loginUser.type !== 3" @click="typeHandler('delete')">删除</a-button>
          <a-modal v-model="addTypeVisible" :title="typeTitle" ok-text="确认" cancel-text="取消" @ok="typeOkHandler" @cancel="cancelHandler">
            <a-form-item label="资源分类" v-if="currentTypeOpera === 2 || currentTypeOpera === 3">
              <a-select style="width: 300px" placeholder="请选择资源分类" v-model="currentTypeId"
              >
                <a-select-option v-for="item in resourceTypeList || []" :key="item.resourceTypeId" :value="item.resourceTypeId">
                  {{item.resourceType}}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="资源分类名" v-if="currentTypeOpera === 1 || currentTypeOpera === 2">
              <a-input placeholder="请输入资源分类名!" v-model="resTypeName"/>
            </a-form-item>
          </a-modal>
        </a-menu>
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="resourceList">
          <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
<!--            标签 -->
            <a-carousel arrows class="carouser" slot="extra">
              <div
                  slot="prevArrow"
                  slot-scope="props"
                  class="custom-slick-arrow"
                  style="left: 10px;zIndex: 1"
              >
                <a-icon type="left-circle" />
              </div>
              <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                <a-icon type="right-circle" />
              </div>
              <div v-for="img in item.resImg" :key="img">
                <img
                    width="300"
                    alt="res images"
                    :src="img"
                />
              </div>
            </a-carousel>
            <a-list-item-meta :description="item.description">
<!--              标题-->
              <a slot="title"
                 title="资源标题"
                 class="cursor"
                 @click="$router.push({name:'resDetail',params:{resId:$encry(item.resId)}})"
                 style="margin-right: 10px" :href="item.href">{{ item.resTitle }}</a>
<!--              头像-->
              <a-avatar @click="$router.push({name:'userinfo',params:{userId:$encry(item.user.userId)}})" class="cursor" slot="avatar" :src="item.user.avatar || ''" :title="item.user.userName"/>
<!--              标签-->
              <a-tag slot="title" class="cursor" :color="tag.rankColor" v-for="(tag,index) in item.user.rankList || []" :key="index">{{tag.rankName}} </a-tag>
            </a-list-item-meta>
<!--            描述-->
            <div class="resContent">
              资源分类: <a-tag v-if="item.type" class="cursor" color="blue">{{item.type.resourceType}}</a-tag> <br/>
              资源描述: {{ item.resDesc}}<br/>
              资源发布时间: {{ $moment(item.resPushTime).format('yyyy-MM-DD HH:mm:ss') }}<br/>
            <div>
                <a-space>
                  <a-button v-if="$store.state.user.loginUser.userId !== item.user.userId"
                            type="primary" ghost size="small" @click="showModal(item)">
                    举报
                  </a-button>

                  <a-button v-if="$store.state.user.loginUser.type !== 3"
                            type="danger" ghost size="small" @click="removeModal(item)">
                    删除
                  </a-button>
                </a-space>
<!--                举报模态框-->
                <a-modal
                    :width="600"
                    title="违规举报"
                    :mask="true"
                    :maskStyle="{opacity:'0.2'}"
                    :maskClosable="false"
                    :visible="visible"
                    :confirm-loading="confirmLoading"
                    @ok="handleOk"
                    okText="确认提交"
                    cancelText="在寻思一下"
                    @cancel="handleCancel"
                >
                  <a-form :form="reportForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
                    <a-form-item label="违规类型">
                      <a-radio-group v-decorator="['reportType',{ rules: [{ required: true, message: '请选择类型' }] }]">
                        <a-radio value="资源失效">
                          资源失效
                        </a-radio>
                        <a-radio value="有害资源">
                          有害资源
                        </a-radio>
                        <a-radio value="恶意宣传">
                          恶意宣传
                        </a-radio>
                        <a-radio value="打广告">
                          打广告
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>

                    <a-form-item label="描述">
                      <a-textarea
                          :rows="4"
                          v-decorator="['reportWhy', { rules: [{ required: true, message: '请填写原因!' }] }]"
                      />
                    </a-form-item>

                    <a-form-item label="其他材料">
                      <div class="clearfix">
                        <a-upload
                            :file-list="fileList"
                            :remove="handleRemove"
                            :before-upload="beforeUpload">
                          <a-button :disabled="fileList.length === 3 || isUpload"> <a-icon type="upload" />
                            选择图片
                          </a-button>
                        </a-upload>
                        <a-button
                            type="primary"
                            :disabled="fileList.length === 0"
                            :loading="uploading"
                            style="margin-top: 16px"
                            @click="handleUpload"
                        >
                          {{ uploading ? '上传中...' : '上传' }}
                        </a-button>
                      </div>
                    </a-form-item>
                  </a-form>
                </a-modal>
<!--                删除资源模态框-->
                <a-modal
                    :width="600"
                    title="资源删除"
                    :visible="removeVisible"
                    :confirm-loading="removeConfirmLoading"
                    @ok="resRemoveHandleOk"
                    okType="danger"
                    okText="确认删除"
                    cancelText="不删除了吧"
                    @cancel="removeHandleCancel"
                >
                  <a-form :form="removeForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
                    <a-form-item label="删除类型">
                      <a-radio-group v-decorator="['removeType',{ rules: [{ required: true, message: '请选择类型' }] }]">
                        <a-radio value="资源失效">
                          资源失效
                        </a-radio>
                        <a-radio value="有害资源">
                          有害资源
                        </a-radio>
                        <a-radio value="恶意宣传">
                          恶意宣传
                        </a-radio>
                        <a-radio value="不是资源">
                          不是资源
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>

                    <a-form-item label="原因描述">
                      <a-textarea
                          :rows="4"
                          v-decorator="['removeWhy', { rules: [{ required: true, message: '请填写原因!' }] }]"
                      />
                    </a-form-item>
                  </a-form>
                </a-modal>
              </div>
            </div>
          </a-list-item>
        </a-list>
      </a-tab-pane>
      <!--      博客-->
      <a-tab-pane key="blog" tab="博客首页" force-render>
        <div v-for="blog in blogList" :key="blog.blogId">
          <Blog @niu="niu" @reload="reload" @handleReply="handleReply" :blog="blog"></Blog>
          <comment-area @reload="reload"
                        :blog="blog"
                        :parentMsgId="replyYouMsgId"
                        :avator="$store.state.user.loginUser.avator"
                        :replyMsgUsername="replyMsgUsername">

          </comment-area>
          <a-divider />
        </div>
        <a-divider>
          <a-button type="primary" @click="loadMore">
            加载更多
          </a-button>
        </a-divider>
      </a-tab-pane>
      <!--      竞技大pk-->
      <a-tab-pane key="pk" tab="观点pk首页">
        <a-list
            class="demo-loadmore-list"
            :loading="loading"
            item-layout="vertical"
            :data-source="pkPageBean.data || []"
        >
          <div
              v-if="showLoadingMore"
              slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
          >
            <a-spin v-if="loadingMore" />
            <a-button v-else @click="onLoadMore">
              加载更多
            </a-button>
          </div>
          <a-list-item slot="renderItem" slot-scope="item, index">
            <div slot="extra" style="width:300px;display: flex;justify-content: space-around">
              <a-row :gutter="16">
                <a-col>
                  <a-statistic title="正方" :value="item.zniu" valueStyle="color:blue"></a-statistic>
                </a-col>
              </a-row>

              <a-row :gutter="16">
                <a-col>
                  <a-statistic title="反方" :value="item.fniu" valueStyle="color:red"></a-statistic>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col>
                  <a-statistic title="统计" :value="item.count" class="demo-class"></a-statistic>
                </a-col>
              </a-row>
            </div>

            <a-list-item-meta
                :description="item.user.userName + '于' + $moment(item.pkPublishTime).format('yyyy-MM-DD HH:mm:ss') + ' 发布'"
            >
              <a slot="title" title="标题"
                 class="cursor" style="margin-right: 10px"
                 href="javascript:void(0)" @click="$router.push({name:'pkDetail',params:{id:$encry(item.id)}})">{{ item.pkTitle}}</a>
              <!--              头像-->
              <a-avatar class="cursor"
                        @click="$router.push({name:'userinfo',params:{userId:$encry(item.user.userId)}})"
                        slot="avatar" :src="item.user.avatar || ''" :title="item.user.userName"/>
              <!--              标签-->
              <a-tag slot="title" class="cursor" :color="tag.rankColor" v-for="(tag,index) in item.user.rankList || []" :key="index">{{tag.rankName}} </a-tag>
            </a-list-item-meta>
            <!--            描述-->
            <div class="resContent">
              Pk描述: {{ item.pkContent}}<br/>
              Pk状态: <a-tag class="cursor" :color="item.pkStatus === 1 ? 'green' : 'red'">{{item.pkStatus === 1 ? '进行中' : '已结束'}}</a-tag><br/>
              PK结束时间: {{$moment(item.pkEndTime).format('yyyy-MM-DD HH:mm:ss')}}<br/>
              <a-space>
                <a-button v-if="$store.state.user.loginUser.type !== 3"
                          type="danger" ghost size="small" @click="pkRemoveModal(item)">
                  删除
                </a-button>
              </a-space>
              <!--                删除Pk模态框-->
              <a-modal
                  :width="600"
                  title="Pk删除"
                  :visible="pkRemoveVisible"
                  :confirm-loading="pkRemoveConfirmLoading"
                  @ok="pkRemoveHandleOk"
                  okType="danger"
                  okText="确认删除"
                  cancelText="不删除了吧"
                  @cancel="pkRemoveHandleCancel"
              >
                <a-form :form="pkRemoveForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <a-form-item label="删除类型">
                    <a-radio-group v-decorator="['removeType',{ rules: [{ required: true, message: '请选择类型' }] }]">
                      <a-radio value="与学习无关">
                        与学习无关
                      </a-radio>
                      <a-radio value="有害观点">
                        有害观点
                      </a-radio>
                      <a-radio value="恶意宣传">
                        恶意宣传
                      </a-radio>
                      <a-radio value="违法行为">
                        违法行为
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>

                  <a-form-item label="原因描述">
                    <a-textarea
                        :rows="4"
                        v-decorator="['removeWhy', { rules: [{ required: true, message: '请填写原因!' }] }]"
                    />
                  </a-form-item>
                </a-form>
              </a-modal>
            </div>
          </a-list-item>
        </a-list>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import CommentArea from "@/components/home/CommentArea";
import Blog from "@/components/home/Blog"
import {DEFAULT_PAGENUM, DEFAULT_PAGESIZE, FILE_ALLOW_LIST} from "@/constent";
import {getBlogList} from "@/api/blog";
import {addReport, getResourceList, getTypeList, insertOrUpdateResType, removeType} from "@/api/resourse";
import {uploadBatch} from "@/api/base";
import {addRecycle} from "@/api/recycle";
import {getPkList} from "@/api/pk";
export default {
  name: "index",
  components: {
    Blog,
    CommentArea
  },
  data(){
    return {
      pagination: {
        onChange: page => {
          this.resQueryParam.pageNum = page;
        },
        pageSize: DEFAULT_PAGESIZE,
      },
      initQueryParam:{
        pageSize:DEFAULT_PAGESIZE,
        pageNum:DEFAULT_PAGENUM,
        keyword:''
      },
      // 博客相关
      replyYouMsgId: undefined,
      replyMsgUsername: "",
      blogBean:{},
      blogList:[],
      // 查询参数
      queryParam:{
        pageSize:DEFAULT_PAGESIZE,
        pageNum:DEFAULT_PAGENUM,
        keyword:''
      },
      // 资源相关
      resourceTypeList:[],
      defaultSelectKeys:[1],
      addTypeVisible: false,
      typeTitle:'',
      currentTypeId:undefined,
      resTypeName:'',
      currentTypeOpera:1,
      resourceList:[],
      resQueryParam:{
        pageSize:DEFAULT_PAGESIZE,
        pageNum:DEFAULT_PAGENUM,
        keyword:'',
        resType:1
      },
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      formLayout: 'horizontal',
      reportForm: this.$form.createForm(this, { name: 'coordinated' }),
      currentRes:{},
      fileList: [],
      uploading: false,
      // 是否已经上传图片
      isUpload:false,
      // 上传成功的图片路径
      resImages:[],
      // 删除资源
      removeVisible:false,
      removeConfirmLoading: false,
      removeForm: this.$form.createForm(this, { name: 'removeForm' }),

      // pk相关
      pkQueryParams:{
        pageNum: DEFAULT_PAGENUM,
        pageSize:DEFAULT_PAGESIZE,
        keyword:undefined
      },
      pkPageBean:{},
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      currentPk:{},
      // 删除pk
      pkRemoveVisible:false,
      pkRemoveConfirmLoading: false,
      pkRemoveForm: this.$form.createForm(this, { name: 'pkRemoveForm' }),
    }
  },
  mounted() {
    // 初始化加载博客
    this.loadBlogList();
    // 初始化加载资源分类列表
    this.loadTypeList();
  },
  watch:{
    // 监视参数变化
    resQueryParam:{
      immediate:true,
      deep:true,
      handler(){
        // 初始化加载资源
        this.loadResourceList();
      }
    }
  },
  methods: {
    // 获得资源分类列表
    async loadTypeList(){
      const { code,data,msg } = await getTypeList();
      if (code === 200){
        this.resourceTypeList = data;
      } else {
        console.log(msg);
      }
    },
    // 选中使得回调
    selectHandler(recode){
      this.resQueryParam.resType = recode.key;
    },
    // 操作处理器
    typeHandler(opera){
      this.addTypeVisible = true;
      if (opera === 'add'){
        this.typeTitle = "新增分类";
        this.currentTypeOpera = 1;
      } else if (opera === 'update') {
        this.typeTitle = "修改分类";
        this.currentTypeOpera = 2;
      } else {
        this.typeTitle = "删除分类";
        this.currentTypeOpera = 3;
      }
    },
    // 取消
    cancelHandler(){
      this.currentTypeOpera = 1;
      this.resTypeName = '';
      this.currentTypeId = undefined;
      this.addTypeVisible = false;
    },
    // 新增资源分类回调
    async typeOkHandler(){
      const { resTypeName, currentTypeId,currentTypeOpera} = this;
      if (currentTypeOpera === 1){
        if (resTypeName === ''){
          this.$message.error("分类名不能为空");
          return;
        }
        let params = {resourceType: resTypeName};
        const {code,msg} = await insertOrUpdateResType(params);
        if (code === 200){
          this.$message.success(msg);
          this.resTypeName = '';
          this.addTypeVisible = false;
          this.loadTypeList();
        } else {
          this.$message.error(msg);
        }
      }else if (currentTypeOpera === 2){
        if (resTypeName === ''){
          this.$message.error("分类名不能为空");
          return;
        }
        if (!currentTypeId){
          this.$message.error("您是要修改哪个分类?");
          return;
        }
        let params = {
          resourceTypeId: currentTypeId,
          resourceType: resTypeName
        };
        const {code,msg} = await insertOrUpdateResType(params);
        if (code === 200){
          this.$message.success(msg);
          this.resTypeName = '';
          this.currentTypeId = undefined;
          this.addTypeVisible = false;
          this.loadTypeList();
        } else {
          this.$message.error(msg);
        }
      } else if (currentTypeOpera === 3){
        if (!currentTypeId){
          this.$message.error("您是要删除哪个分类?");
          return;
        }
        const {code,msg} = await removeType(currentTypeId);
        if (code === 200){
          this.$message.success(msg);
          this.addTypeVisible = false;
          this.currentTypeId = undefined;
          this.loadTypeList();
        } else {
          this.$message.error(msg);
        }
      }
    },
    // tabs切换回调
    callback(key) {
      if (key === 'pk'){
        this.loadPkList(this.pkQueryParams);
      }
    },
    handleReply(data) {
      this.replyYouMsgId = data.msgId;
      this.replyMsgUsername = data.msgUsername;
    },
    reload() {
      this.$emit("reload")
      this.loadBlogList();
    },
    // 点赞功能
    niu(obj) {
      let blogList = this.blogBean.data || [];
      let res = blogList.map(blog => {
        if (blog.blogId === obj.blogId){
          if (obj.type === 1){
            blog.blogNiu++;
            blog.isNiu = 1;
          }else if (obj.type === 0){
            blog.blogNiu--;
            blog.isNiu = 0;
          }
        }
        return blog;
      })
      this.blogList = res;
    },
    // 加载博客
    async loadBlogList(){
      const { code,data,msg } = await getBlogList(this.queryParam);
      if (code === 200){
        if (data.data){
          this.blogBean = data;
          this.blogList = data.data;
        }
      } else {
        this.$message.error(msg);
      }
    },
    // 博客加载更多
    async loadMore(){
      this.queryParam.pageNum += DEFAULT_PAGENUM;
      const { code,data,msg } = await getBlogList(this.queryParam);
      if (code === 200){
        if (data.data){
          this.blogBean = data;
          this.blogList = this.blogList.concat(data.data);
        }
      } else {
        this.$message.error(msg);
      }
    },

    // 资源相关
    async loadResourceList(){
      const {code ,data, msg} = await getResourceList(this.resQueryParam);
      if (code === 200){
        this.resourceList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 展示举报模态框
    showModal(item) {
      this.visible = true;
      this.currentRes = item;
    },
    removeModal(item){
      this.removeVisible = true;
      this.currentRes = item;
    },
    // 模态框确认举报
    handleOk(e) {
      e.preventDefault();
      const _this = this;
      this.ModalText = '正在处理中,请稍后...';
      this.confirmLoading = true;
      this.reportForm.validateFields((err, values) => {
        if (!err) {
          let params = {...values,resId:_this.currentRes.resId,reportImages:_this.resImages}
          addReport(params).then(res => {
            const { code,msg } = res;
            if (code === 200){
              setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
                _this.$message.success(msg);
                _this.reportForm.resetFields();
                _this.otherImages = [];
                _this.currentRes = {};
                _this.isUpload = false;
              }, 1000);
            } else {
              setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
                _this.$message.error(msg);
              }, 1000);
            }
          }).catch(error => {
            console.log(error);
            setTimeout(() => {
              this.visible = false;
              this.confirmLoading = false;
              _this.$message.error("系统异常");
            }, 1000);
          })
        }else{
          this.confirmLoading = false;
        }
      });
    },
    // 取消举报
    handleCancel(e) {
      this.visible = false;
      this.reportForm.resetFields();
      this.isUpload = false;
    },
    // 删除图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    // 上传之前
    beforeUpload(file) {
      if (file) {
        let name = file.name;
        let postStr = name.substring(name.lastIndexOf('.'));
        if (FILE_ALLOW_LIST.includes(postStr)){
          this.fileList = [...this.fileList, file];
          return false;
        }
        this.$message.error("请上传图片文件");
      }
    },
    // 上传
    async handleUpload() {
      const { fileList } = this;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.append('files', file);
      });
      this.uploading = true;

      const {code,data,msg} = await uploadBatch(formData);
      if (code === 200){
        this.fileList = [];
        this.uploading = false;
        this.isUpload = true;
        this.resImages = data;
        this.$message.success(msg);
      } else {
        this.uploading = false;
        this.$message.error(msg);
      }
    },

    // 资源删除模态框确认举报
    resRemoveHandleOk(e) {
      e.preventDefault();
      const _this = this;
      this.ModalText = '操作处理中...';
      this.removeConfirmLoading = true;
      this.removeForm.validateFields((err, values) => {
        if (!err) {
          let params = {...values,mainId:_this.currentRes.resId,fileType:2}
          addRecycle(params).then(res => {
            const { code,msg } = res;
            if (code === 200){
              setTimeout(() => {
                this.removeVisible = false;
                this.removeConfirmLoading = false;
                _this.$message.success(msg);
                _this.removeForm.resetFields();
                _this.loadResourceList();
                _this.currentRes = {};
              }, 1000);
            } else {
              setTimeout(() => {
                this.removeVisible = false;
                this.removeConfirmLoading = false;
                _this.$message.error(msg);
              }, 1000);
            }
          }).catch(error => {
            console.log(error);
            setTimeout(() => {
              this.removeVisible = false;
              this.removeConfirmLoading = false;
              _this.$message.error("系统异常");
            }, 1000);
          })
        }else{
          this.removeConfirmLoading = false;
        }
      });
    },
    // 取消举报
    removeHandleCancel(e) {
      this.removeVisible = false;
    },

    // pk相关
    // 加载pk
    async loadPkList(params){
      const { code,data,msg } = await getPkList(params);
      if (code === 200){
        this.loading = false;
        this.pkPageBean = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 加载更多
    onLoadMore() {
      this.loadingMore = true;
      this.pkQueryParams.pageNum += 1;
      getPkList(this.pkQueryParams).then(res => {
        if (res.code === 200){
          this.pkPageBean.data = this.pkPageBean.data.concat(res.data.data);
          this.$nextTick(() => {
            window.dispatchEvent(new Event('resize'));
          });
        }
        this.loadingMore = false;
      });
    },
    // pk删除
    // 弹出模态框
    pkRemoveModal(item){
      this.pkRemoveVisible = true;
      this.currentPk = item;
    },
    // pk删除模态框确认
    pkRemoveHandleOk(e) {
      e.preventDefault();
      const _this = this;
      this.ModalText = '操作处理中...';
      this.pkRemoveConfirmLoading = true;
      this.pkRemoveForm.validateFields((err, values) => {
        if (!err) {
          let params = {...values,mainId:_this.currentPk.id,fileType:3}
          addRecycle(params).then(res => {
            const { code,msg } = res;
            if (code === 200){
              setTimeout(() => {
                this.pkRemoveVisible = false;
                this.pkRemoveConfirmLoading = false;
                _this.$message.success(msg);
                _this.pkRemoveForm.resetFields();
                _this.loadPkList(_this.initQueryParam);
                _this.currentPk = {};
              }, 1000);
            } else {
              setTimeout(() => {
                this.pkRemoveVisible = false;
                this.pkRemoveConfirmLoading = false;
                _this.$message.error(msg);
              }, 1000);
            }
          }).catch(error => {
            console.log(error);
            setTimeout(() => {
              this.pkRemoveVisible = false;
              this.pkRemoveConfirmLoading = false;
              _this.$message.error("系统异常");
            }, 1000);
          })
        }else{
          this.pkRemoveConfirmLoading = false;
        }
      });
    },
    // 取消删除
    pkRemoveHandleCancel(e) {
      this.pkRemoveVisible = false;
    },
  }
}
</script>

<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.carouser{
  width: 300px;
}
.resContent{
  line-height: 30px;
}
.demo-loadmore-list {
  min-height: 350px;
}
.like:hover{
  color: green;
}
.dislike:hover{
  color: red;
}
.opera-btn{
  margin-right: 10px;
}
</style>

